<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,viewport-fit=cover initial-scale=1.0">
    <title>Document</title>
    <!-- 重置默认样式 -->
    <link rel="stylesheet" href="css/reset.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <!-- 首页样式 -->
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- header start -->
   <header class="header">
        <div class="logo-wrap">
            <a href="#"><img src="./images/logo-@2x.png" class="logo" alt=""></a>
        </div>
        <div class="search">
            <a href="#"><img src="./images/search-@2x.png" class="search-img" alt=""></a>
        </div>
        <div class="login-wrap">
            <a href="#"><img src="images/login-@2x.png" class="login" alt=""></a>
        </div>
        <a class="download" href="#">下载APP</a>
   </header> 
   <!-- end header -->
    <!-- nav start -->
    <nav class="nav">
        <div class="swiper" id="J_nav">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#" class="active">首页</a></div>
                <div class="swiper-slide"><a href="#">动画</a></div>
                <div class="swiper-slide"><a href="#">番剧</a></div>
                <div class="swiper-slide"><a href="#">国创</a></div>
                <div class="swiper-slide"><a href="#">音乐</a></div>
                <div class="swiper-slide"><a href="#">舞蹈</a></div>
                <div class="swiper-slide"><a href="#">直播</a></div>
                <div class="swiper-slide"><a href="#">新剧</a></div>
                <div class="swiper-slide"><a href="#">电影</a></div>
                <div class="swiper-slide"><a href="#">生活</a></div>
            </div>    
        </div> 
    </nav>  
    <!-- end nav -->
    <!-- banner start -->
     <section class="banner">
        <div class="swiper" id="J_banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner1-@2x.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner2-@2x.png" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"><img src="images/banner3-@2x.png" alt=""></a>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
    </section>
    <!-- end banner -->
    <!-- menu start -->
    <nav class="menu">
        <ul>
            <li>
                <a href="#">
                    <img src="images/icon1.png" alt="">
                    <p>番 剧</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon2.png" alt="">
                    <p>直 播</p>   
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon3.png" alt="">
                        <p>电视剧</p>     
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon4.png" alt="">
                    <p>生 活</p>      
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon5.png" alt="">
                        <p>电 影</p>     
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon6.png" alt="">
                        <p>游 戏</p>     
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon7.png" alt="">
                    <p>鬼 畜</p>      
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon8.png" alt="">
                        <p>科 技</p>     
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon9.png" alt="">
                        <p>冷知识</p>     
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/icon10.png" alt="">
                    <p>新片预告</p>      
                </a>
            </li>
        </ul>
    </nav>
        <!-- end menu -->
    <!-- main start -->
    <main class="main container">
        <!-- tabs start -->
        <section class="tabs">
            <div class="tab-header" id="J_tab_header">
                <div class="tab-header-item active">热门排行</div>
                <div class="tab-header-item">最新热播</div>
                <div class="tab-header-item">综合推荐</div>
            </div>
            <div class="tab-content" id="J_tab_content">
                <div class="tab-content-item active">
                    <div class="swiper hot-rank" id="J_hot-rank">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">透明手表。下集预告</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【人类高质量CG】咏春宁次： 笼中鸟心中拳</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content-item">
                    <div class="swiper hot-play" id="J_hot-play">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">这真的是碳基生物能吃的玩意 吗？？？</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">这真的是碳基生物能吃的玩意 吗？？？</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img1.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img2.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">这真的是碳基生物能吃的玩意 吗？？？</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-content-item">
                    <div class="swiper recommand" id="J_recommand">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img3.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">70.8万</span>
                                                <span class="number">11.5万</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</p>
                                    </a>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <div class="common-card">
                                    <a href="#">
                                        <div class="img">
                                            <img src="./images/img4.png" alt="">
                                            <div class="card-info">
                                                <span class="play-count">190.4万</span>
                                                <span class="number">6160</span>
                                            </div>
                                        </div>
                                        <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- end tabs -->
        <!-- recommend-list start -->
        <section class="recommend-list">
            <ul>
                <li>
                    <a href="#">
                        <div class="img-wrap">
                            <img src="images/list1.png" alt="">
                        </div>
                        <div class="info">
                            <div class="title ellipsis-single-line">自制战斗机式的打水仗摩托车</div>
                            <div class="desc ellipsis-single-line">跟小朋友打水仗输了做了个战斗机准备一雪前耻</div>
                        </div>
                        <div class="play-button"></div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="img-wrap">
                            <img src="images/list2.png" alt="">
                        </div>
                        <div class="info">
                            <div class="title ellipsis-single-line">原 神 之 友 （第九期）</div>
                            <div class="desc ellipsis-single-line">所有原神玩家都可以参加！期还会额外有一个满</div>
                        </div>
                        <div class="play-button"></div>
                    </a>
                </li>
            </ul>
        </section>
        <!-- recommend-list end -->
         <!-- history start -->
         <section class="history">
            <div class="history-header">
                <p class="title">最近再看</p>
                <p class="more">查看全部</p>
            </div>
            <div class="history-list">
                <div class="swiper swiper-history" id="J_swiper-history">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic1.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic2.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic3.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic2.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic1.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic2.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic3.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">再飞行，带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="img-wrap">
                                    <img src="images/xxpic2.png" alt="">
                                </div>
                                <p class="title ellipsis-multi-line2">这才是顶级的 气场</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
         </section>
         <!-- end history -->
          <!-- information-list start -->
          <section class="information-list">
            <ul>
                <li>
                     <div class="common-card">
                        <a href="#">
                            <div class="img">
                                <img src="./images/img1.png" alt="">
                                <div class="card-info">
                                    <span class="play-count">190.4万</span>
                                    <span class="number">6160</span>
                                </div>
                            </div>
                            <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                        </a>
                    </div>
                </li>
                <li>
                     <div class="common-card">
                        <a href="#">
                            <div class="img">
                                <img src="./images/img2.png" alt="">
                                <div class="card-info">
                                    <span class="play-count">190.4万</span>
                                    <span class="number">6160</span>
                                </div>
                            </div>
                            <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                        </a>
                    </div>
                </li>
                <li>
                     <div class="common-card">
                        <a href="#">
                            <div class="img">
                                <img src="./images/img3.png" alt="">
                                <div class="card-info">
                                    <span class="play-count">190.4万</span>
                                    <span class="number">6160</span>
                                </div>
                            </div>
                            <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                        </a>
                    </div>
                </li>
                <li>
                     <div class="common-card">
                        <a href="#">
                            <div class="img">
                                <img src="./images/img4.png" alt="">
                                <div class="card-info">
                                    <span class="play-count">190.4万</span>
                                    <span class="number">6160</span>
                                </div>
                            </div>
                            <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                        </a>
                    </div>
                </li>
                <li>
                     <div class="common-card">
                        <a href="#">
                            <div class="img">
                                <img src="./images/img1.png" alt="">
                                <div class="card-info">
                                    <span class="play-count">190.4万</span>
                                    <span class="number">6160</span>
                                </div>
                            </div>
                            <p class="title ellipsis-multi-line2">爽！边迷路边吃超辣美食的感 觉，只能在9D重庆体验到！</p>
                        </a>
                    </div>
                </li>
            </ul>
          </section>
          <!-- end information-list -->
    </main>
    <!-- end main -->
     <!-- tabbar start -->
    <section class="tabbar">
        <ul>
            <li class="active">
                <a href="#">
                    <span class="icon icon1"></span>
                    <span class="txt">首页</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon2"></span>
                    <span class="txt">动态</span>
                </a>
            </li>
            <li class="add">
                <a href="#"></a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon3"></span>
                    <span class="txt">会员购</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="icon icon4"></span>
                    <span class="txt">我的</span>
                </a>
            </li>
        </ul>
    </section>
    <!-- end tabbar -->
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/rem.js"></script>
    <script src="js/index.js"></script>
</body>
</html>